<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance, Message } from "@arco-design/web-vue";
import { standardAdd, standardUpdate } from "@/services/scoreApi.ts";
import type { scoreEdit } from "@/types/scoreType";
const option = reactive({
  visible: false,
  loading: false,
  title: "",
  type: 0,
});

const formData = reactive<scoreEdit>({
  name: "",
  id: "",
  level1: "",
  level2: "",
  score: "",
});

const props = defineProps<{
  moduleId: string;
}>();

const emit = defineEmits<{
  (e: "refresh"): void;
}>();

const formRef = ref<FormInstance>();

const rules = {
  name: [
    {
      required: true,
      message: "请输入一级指标",
    },
  ],
  // level1: {
  //   required: true,
  //   message: "请输入二级指标",
  // },
  level2: {
    required: true,
    message: "请输入三级指标",
  },
  score: {
    required: true,
    message: "请输入分值",
  },
};

const handleCancel = () => {
  option.visible = false;
};

const handleOk = () => {
  formRef.value?.validate().then((v: any) => {
    if (!v) {
      option.loading = true;
      // 添加
      if (option.type === 0) {
        standardAdd({
          ...formData,
          moduleId: props.moduleId,
        })
          .then((res) => {
            if (res.code === 200) {
              Message.success("添加成功");
              emit("refresh");
              handleCancel();
            } else {
              Message.error(res.msg);
            }
          })
          .finally(() => {
            option.loading = false;
          });
      }
      // 修改
      if (option.type === 1) {
        standardUpdate(formData)
          .then((res) => {
            if (res.code === 200) {
              Message.success("修改成功");
              emit("refresh");
              handleCancel();
            } else {
              Message.error(res.msg);
            }
          })
          .finally(() => {
            option.loading = false;
          });
      }
    }
  });
};
// 添加初始化
const init = () => {
  formData.name = "";
  formData.id = "";
  formData.level1 = "";
  formData.level2 = "";
  formData.score = "";
  option.visible = true;
  option.loading = false;
  option.title = "添加";
  option.type = 0;
  formRef.value?.clearValidate();
};
// 修改初始化
const edit = (data: scoreEdit) => {
  formData.name = data.name;
  formData.id = data.id;
  formData.level1 = data.level1;
  formData.score = data.standardScore;
  formData.level2 = data.level2;
  option.visible = true;
  option.loading = false;
  option.title = "修改";
  option.type = 1;
  formRef.value?.clearValidate();
};

defineExpose({
  init,
  edit,
});
</script>

<template>
  <a-modal
    :visible="option.visible"
    :ok-loading="option.loading"
    @ok="handleOk"
    @cancel="handleCancel"
    :title="option.title"
    :mask-closable="false"
    title-align="start"
    :esc-to-close="false"
  >
    <a-form
      :model="formData"
      ref="formRef"
      :rules="rules"
    >
      <a-form-item
        label="一级指标"
        field="name"
      >
        <a-input
          allow-clear
          v-model="formData.name"
          placeholder="请输入一级指标"
        />
      </a-form-item>
      <a-form-item
        label="二级指标"
        field="level1"
      >
        <a-input
          allow-clear
          v-model="formData.level1"
          placeholder="两项则不填"
        />
      </a-form-item>
      <a-form-item
        label="三级指标"
        field="level2"
      >
        <a-textarea
          allow-clear
          v-model="formData.level2"
          placeholder="请输入三级指标"
          :auto-size="{
            minRows:2,
        }"
        />
      </a-form-item>
      <a-form-item
        label="分值"
        field="score"
      >
        <a-input
          allow-clear
          v-model="formData.score"
          placeholder="请输入分值"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="scss">
</style>